<template>
  <div>
    <div class="header">
      <h1>管理员列表</h1>
      <el-button type="primary" size="default" @click="showEdit">
        新增管理员
      </el-button>
    </div>
    <el-table :data="items">
      <el-table-column prop="_id" label="ID" width="250"></el-table-column>
      <el-table-column prop="username" label="用户名"></el-table-column>
      <el-table-column label="头像">
        <template slot-scope="scope">
          <span>
            <el-popover placement="top-start" trigger="hover">
              <img :src="scope.row.icon" style="width: 150px; height: 150px" />
              <img
                :src="scope.row.icon"
                style="width: 30px; height: 30px"
                slot="reference"
              />
            </el-popover>
          </span>
        </template>
      </el-table-column>
      <el-table-column fixed="right" label="操作" width="180">
        <template slot-scope="scope">
          <el-button
            type="text"
            size="small"
            icon="el-icon-edit"
            @click="showEdit(scope.row._id)"
          >
            <!-- $router.push(`/admin_users/edit/${scope.row._id}`) -->
            编辑
          </el-button>
          <el-button
            type="text"
            size="small"
            icon="el-icon-delete"
            @click="remove(scope.row._id)"
          >
            删除
          </el-button>
        </template>
      </el-table-column>
    </el-table>
    <AdminUserEdit></AdminUserEdit>
  </div>
</template>

<script>
import AdminUserEdit from './AdminUserEdit.vue'

export default {
  data() {
    return {
      items: [],
      dialogFormVisible: false,
    }
  },
  methods: {
    async fetch() {
      const res = await this.$http.get('rest/admin_users')
      console.log(res)
      this.items = res.data
    },
    remove(id) {
      this.$confirm('是否确定要删除该管理员?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
      })
        .then(async () => {
          await this.$http.delete(`rest/admin_users/${id}`)
          this.$message({
            type: 'success',
            message: '删除成功!',
          })
          this.fetch()
        })
        .catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除',
          })
        })
    },
    showEdit(id) {
      this.$router.push(`/admin_users/edit/${id}`)
      this.dialogFormVisible = true
    },
  },
  created() {
    this.fetch()
  },
  components: { AdminUserEdit },
}
</script>
<style lang="scss" scoped>
.header {
  h1 {
    display: inline-block;
    padding-right: 20px;
  }
  .el-button {
    font-size: 16px;
    color: #333;
    font-weight: 500;
  }
}
</style>
